<template>
  <detailbox :title="detailId ? '重新编辑' : '创建'" @leftclick="close">
    <div slot="right" class="flex_item flex_between">
      <div v-if="type == 1" class="error error_f f12 ml10">
        <i class="f14 el-icon-error"></i>
        审核未通过:
        <span class="ml30">{{ checkItem.type == 1 ? '审核人:' : checkItem.type == 2 ? '评审人:' : checkItem.type == 4 ? '批准人:' : '' }} {{ checkItem.createUserName }}</span>
        <span class="ml30">未通过原因: {{ checkItem.content }}</span>
      </div>
      <div v-else></div>
      <div>
        <el-button type="success" size="small" @click="addForm" v-if="type == 0">添加创建</el-button>
        <el-button v-if="type == 1" type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情</el-button>
        <el-button type="primary" size="small" @click="submit">提交</el-button>
      </div>
    </div>
    <el-row class="mt10">
      <el-col :span="18">
        <basic-container v-for="(form, index) in formList" :key="index" :id="'item' + index">
          <div class="main_title success_f flex_between">
            <b>
              文件信息
              <span v-if="formList.length > 1">({{ index + 1 }})</span>
            </b>
            <el-button type="danger" size="small" v-if="index != 0" plain @click="delForm(index)">删除</el-button>
          </div>
          <el-divider></el-divider>
          <div>
            <div class="mb20">
              <span class="index_num success_bg">1</span>
              <b class="f14">文件属性</b>
              <el-popover placement="top-start" title="" width="200" trigger="hover">
                <div>文件属性的数据与上传的文件封面的数据相同</div>
                <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
              </el-popover>
            </div>
            <div>
              <el-form size="small" inline>
                <el-row></el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="文件名称:" required><el-input placeholder="输入文件名称" v-model="form.name"></el-input></el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="文件编号:" required>
                      <el-input v-model="form.fileNumber" placeholder="数据带入" class="w160 ml10" readonly v-if="form.fileNumberType == 0"></el-input>
                      <el-input class="ml10 w160" placeholder="请输入" v-model="form.fileNumber" v-if="form.fileNumberType == 1"></el-input>
                      <el-popover placement="top-start" title="编号规则:" width="220" trigger="hover">
                        <div>
                          <p>RD---------记录文件</p>
                          <p>XXX-------部门代码</p>
                          <p>xx---------流水号,从01开始</p>
                        </div>
                        <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                      </el-popover>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="文件版本号:" required>
                      <el-input v-model="form.versionNumber" placeholder="数据带入" class="w160 ml10" readonly v-if="form.versionNumberType == 0"></el-input>
                      <el-input class="ml10 w160" placeholder="请输入" v-model="form.versionNumber" v-if="form.versionNumberType == 1"></el-input>
                      <el-popover placement="top-start" title="编号规则:" width="220" trigger="hover">
                        <div>
                          <p>A0 ------------ 首版版本号</p>
                          <p>A1...A9 B1...B9 --------依次升版版本号</p>
                        </div>
                        <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                      </el-popover>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="文件控制状态:" required>
                      <el-radio-group v-model="form.controlStatus">
                        <el-radio :label="0">受控</el-radio>
                        <el-radio :label="1">非受控</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="内部/外来文件:" required>
                      <el-radio-group v-model="form.fileSource">
                        <el-radio :label="0">内部文件</el-radio>
                        <el-radio :label="1">外来文件</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="页码数量:" required>
                      <el-input class="w160" placeholder="请输入" v-model="form.pageCount" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                      <el-popover placement="top-start" title="" width="220" trigger="hover">
                        <div>按照封面是第一页顺序编制其它页码</div>
                        <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                      </el-popover>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="编制部门:"><el-input class="w160" v-model="userInfo.deptName" readonly></el-input></el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
          <div>
            <div class="mb20">
              <span class="index_num success_bg">2</span>
              <b class="f14">文件</b>
              <i class="red_f">*</i>
            </div>
            <div class="flex_start mb20">
              <el-button type="primary" plain size="small" @click="openDialg('template')">使用文件模板</el-button>
              <el-button type="primary" plain size="small" @click="upload(form, index)">上传本地文件</el-button>
              <span class="gray_f f12 ml10">仅限上传word/excel格式文件</span>

              <el-popover placement="top-start" title="" width="254" trigger="hover">
                <div>默认使用系统生成的封面，不能更改</div>
                <el-checkbox class="ml10" slot="reference" :value="form.isSystemCover == 1 ? true : false" disabled label="使用系统生成的封面" border style="padding: "></el-checkbox>
              </el-popover>
              <div class="f12 error_f flex_start ml10" v-if="form.isSystemCover == 1">
                <i class="el-icon-warning-outline error_f f14"></i>
                请删除文件自带的封面(若有)，且按照系统生成的封面是第1页的顺序编制其他页码
              </div>
            </div>
            <div class="flex_between" style="align-items: flex-start">
              <table class="owntable mb20" style="width: 100%">
                <tr>
                  <th class="pub_left">
                    文件
                    <span v-if="form.templateFile">- {{ form.isSystemTemplate == 1 ? '使用文件模板' : '使用上传文件' }}</span>
                  </th>
                </tr>
                <tr v-if="form.templateFile">
                  <td class="white_bg">
                    <div class="flex_between">
                      <div class="main_co pointer" @click="fileTempleteEdit(form)">{{ form.originalName }}</div>
                      <div class="flex_between">
                        <!-- <span class="ml10 gray_f">2021-09-27 15:29 编辑</span> -->
                        <el-button plain size="mini" class="ml10" @click="getFileCover(form, 'systemjilufilesprocess')" v-if="form.isSystemCover == 1">封面预览</el-button>
                        <i class="el-icon-delete f16 error_f ml10 pointer" @click="delFileTemplete(form)"></i>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr v-else>
                  <td class="white_bg"><div class="gray_f">文件显示在此处</div></td>
                </tr>
              </table>
            </div>
          </div>
        </basic-container>
      </el-col>
      <el-col :span="6"><file-creat-flow ref="creatFlow"></file-creat-flow></el-col>
    </el-row>
    <chooseTemplate ref="template" title="记录文件系统模板" type="4" @onConfirm="templateConfirm"></chooseTemplate>
    <steps ref="steps" @close="success()" :nowdate="nowdate"></steps>
    <confirm ref="confirm" @close="save()" type="1" :guifanFilesProcessRecordList="guifanFilesProcessRecordList" :systemGuifanFilesProcessList="systemGuifanFilesProcessList"></confirm>
    <showhistory ref="showhistory" type="1" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"></showhistory>
    <el-dialog title="附件管理" append-to-body :visible.sync="attachBox" width="555px">
      <avue-form ref="form" :option="attachOption" :upload-before="uploadBefore" :upload-preview="uploadPreview" v-model="attachForm" :upload-after="uploadAfter"></avue-form>
    </el-dialog>
    <pdf :pdfUrl="src" ref="pdf"></pdf>
  </detailbox>
</template>

<script>
import confirm from './confirm.vue'
import { savefiles, getguifanDetail, update } from '@/api/myapi/tixiwenjian'
import fileMinixs from '@/mixins/file.js'
import fileCreatFlow from '@/components/file-creat-flow/index.vue'
import pdf from '@/components/pdf/index.vue'
export default {
  props: {
    detailId: '',
    type: {
      type: [Number, String],
      default: 0,
    },
  },
  components: {
    confirm,
    fileCreatFlow,
    pdf,
  },
  mixins: [fileMinixs],
  data() {
    return {
      system: 'systemjilufilesprocess',
      nowdate: '',
      checked: false,
      showaddUser: false,
      showpreview: false,
      tableData: [],
      useTemp: false,
      formList: [
        {
          isSystemTemplate: 0,
          controlStatus: 0,
          fileType: 0,
          fileSource: 0,
          versionNumberType: 0,
          fileNumberType: 0,
          isSystemCover: 1,
        },
      ],
      oldguifanFilesProcessRecordList: [],
      guifanFilesProcessRecordList: [],
      systemGuifanFilesProcessList: [],
      memberOption: [],
      isOnlineReview: false,
    }
  },
  mounted() {
    if (this.detailId) {
      this.getDetail()
    } else {
      this.findTypeByProcessType()
    }
    this.getdeptlist()

    console.log(this.userInfo)
  },
  methods: {
    close() {
      this.$emit('close')
    },
    getDetail() {
      getguifanDetail(
        {
          id: this.detailId,
        },
        this.system
      ).then(({ data }) => {
        if (data.success) {
          this.formList = [data.data]
          this.guifanFilesProcessRecordList = data.data.jiluFilesProcessRecordList
          this.checkItem = this.guifanFilesProcessRecordList.find((item) => item.checkStatus == 2)
          this.$nextTick(() => {
            this.$refs.creatFlow.setProcessRecord(this.guifanFilesProcessRecordList)
          })
        }
      })
    },
    // 添加文件
    addForm() {
      this.formList.push({
        isSystemTemplate: 0,
        isSystemCover: 1,
        controlStatus: 0,
        fileSource: 0,
        versionNumber: this.versionNumberType == 0 ? this.findTypeByProcessType(this.liushuihao, 'versionNumber') : '',
        versionNumberType: this.versionNumberType,
        fileNumberType: this.numberType,
        fileNumber: this.numberType == 0 ? this.findTypeByProcessType(this.liushuihao) : '',
      })
      let index = this.formList.length - 1
      setTimeout(() => {
        let document = window.parent.document.getElementById(`item${index}`)
        document.scrollIntoView({ behavior: 'smooth' })
      }, 100)
    },
    delForm(i) {
      this.formList.splice(i, 1)
    },
    // 提交
    submit() {
      let systemGuifanFilesProcessList = []
      let guifanFilesProcessRecordList = this.$refs.creatFlow.guifanFilesProcessRecordList
      let isOnlineReview = this.$refs.creatFlow.isOnlineReview
      for (let i = 0; i <= guifanFilesProcessRecordList.length - 1; i++) {
        let item = guifanFilesProcessRecordList[i]
        item.sort = i
        if (item.type == 1 && !item.userId) {
          this.$message.error('请选择审核人员')
          return
        }
        if (item.type == 4 && !item.userId) {
          this.$message.error('请选择批准人员')
          return
        }
        if (isOnlineReview && item.type == 2 && !item.userId) {
          this.$message.error('请选择评审人员')
          return
        }
      }
      if (!this.formList.length) {
        this.$message.error('请添加文件')
        return
      }
      for (let i = 0; i < this.formList.length; i++) {
        let item = this.formList[i]
        let arr = [
          {
            value: item.name,
            tips: '请补充文件名称',
          },
          {
            value: item.fileType == 0 || item.depts.length > 0,
            tips: '请选择职能部门',
          },
          {
            value: item.fileNumber,
            tips: '请输入文件编号',
          },
          {
            value: item.versionNumber,
            tips: '请输入文件版本号',
          },
          {
            value: item.pageCount,
            tips: '请输入页码数量',
          },
        ]
        for (let j = 0; j < arr.length; j++) {
          if (!arr[j].value) {
            this.$message.error(arr[j].tips)
            return
          }
        }
        item.createDeptName = this.userInfo.deptName
        item.createUserName = this.userInfo.user_name
        item.createUserId = this.userInfo.user_id
        item.createDeptId = this.userInfo.dept_id
        systemGuifanFilesProcessList.push({
          ...item,
          depts: '',
          jiluFilesProcessRecordList: guifanFilesProcessRecordList,
          isUpgrade: 0,
          isOnlineReview: isOnlineReview ? 1 : 0,
          templateFile: item.templateFile || '',
          templateCover: '',
        })
      }
      this.systemGuifanFilesProcessList = systemGuifanFilesProcessList
      this.guifanFilesProcessRecordList = guifanFilesProcessRecordList
      this.openDialg('confirm')
    },
    // 保存
    save() {
      if (this.detailId) {
        update(this.systemGuifanFilesProcessList, this.system).then(({ data }) => {
          if (data.success) {
            this.$message.success('提交成功')
            this.nowdate = this.dateFormat(new Date())
            this.openDialg('steps')
          }
        })
      } else {
        savefiles(this.systemGuifanFilesProcessList, this.system).then(({ data }) => {
          if (data.success) {
            this.$message.success('提交成功')
            this.nowdate = this.dateFormat(new Date())
            this.openDialg('steps')
          }
        })
      }
    },
    success() {
      this.$emit('success')
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
// /deep/ .el-popover .popper__arrow::after{
//   content: '';
//   border-color:#F9DCD9 !important;
// }
.btnbox {
  border: 1px solid #a3cffd;
  opacity: 1;
  border-radius: 3px 0px 0px 3px;
}

.btnleft {
  padding: 0 10px;
}

.btnright {
  border-left: 1px solid #a3cffd;
  padding: 0 10px;
  line-height: 32px;
}

.border {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  line-height: 32px;
  padding: 0 10px;
}

.preview {
  padding: 10px;
  background-color: #f0f2f5;
  // margin-top: 20px;
  margin-left: 10px;
}

.preview .warn_f {
  background-color: #fbf4e0;
  border: 1px solid #f3dea4;
  line-height: 20px;
  padding: 0 4px;
  margin: 20px 0 10px;
}

.preview .tem {
  width: 377px;
  // height: 512px;
}

.preview.bigpreview {
  background-color: #ffffff;
}

.preview.bigpreview .tem {
  width: 510px;
  // height: 693px;
}

.error {
  background-color: #fceeec;
  border: 1px solid #f9dcd9;
  padding: 6px 10px;
  border-radius: 2px;
}

/deep/ .el-checkbox.is-bordered {
  height: 32px;
  padding: 5px 10px;
}

.tabledata {
  padding: 0 10px 10px;

  .addbtn {
    padding-top: 10px;
  }
}
</style>
